<template>
    <div id="nativeBar">
        <ul class="bottomBox">
                <router-link class="bottomBox-item" to="/index" tag="li">
                    <span class="text">首页</span>
                </router-link>
                <router-link class="bottomBox-item" to="/city" tag="li">
                    <span class="text">城市</span>
                </router-link>
                <router-link class="bottomBox-item" to="/mine" tag="li">
                    <span class="text">我的</span>
                </router-link>
        </ul>
    </div>
</template>
<style scoped>
#nativeBar{
    position: fixed;
    width: 100%;
     bottom: 0px;
     border: 1px;
}
.bottomBox{

     width: 100%;
    display: flex;
    
}
.bottomBox-item {
    border: 1px;
    padding: 0 5px;
    flex-grow: 1;
    text-align: center;
}
.text {
    font-size: 0.5rem;
}
</style>